<template>
  <div class="flowpath-container">
    <div>
      <div class="mb20">
        <span class="color_494949 ft12 pr5 w70">{{ translate('姓名') }}：</span>
        <el-input
          v-model="searchInfo"
          class="w192 mr10"
          :placeholder="translate('请输入关键字')"
        />
        <span class="color_494949 ft12 pr5 w70 ml10">{{ translate('证书编号') }}：</span>
        <el-input
          v-model="searchInfo1"
          class="w192 mr10"
          :placeholder="translate('请输入证书证号')"
        />
        <span class="color_494949 ft12 pr5 w70 ml10">{{ translate('单位名称') }}：</span>
        <el-input
          v-model="searchInfo2"
          class="w192 mr10"
          :placeholder="translate('请输入关键字')"
        />
        <span class="color_494949 ft12 pr5 w70 ml10">{{ translate('基层单位名称') }}：</span>
        <el-input
          v-model="searchInfo3"
          class="w192 mr10"
          :placeholder="translate('请输入关键字')"
        />
        <el-button class="settingBtn ml10" type="primary" @click="getList">
          {{ translate('查询') }}
        </el-button>
        <!-- <el-button class="settingBtn mr10" type="primary" @click="resetFn">
          {{ translate('重置') }}
        </el-button> -->
      </div>
      <el-table
          :data="tableData"
          v-loading="loading"
          :row-class-name="tableRowClassName"
          :row-key="getRowKey"
          @selection-change="handleSelectionChange"
          >
        <!-- <el-table-column prop="value" type="selection" width="55" /> -->
        <el-table-column :label="translate('姓名')" prop="OPName" />
        <el-table-column
          :label="translate('性别')"
          prop="Gender"
          show-overflow-tooltip
        />
        <el-table-column :label="translate('单位名称')" prop="UnitName" />
        <el-table-column :label="translate('基层单位名称')" prop="BaseUnitName" />
        <el-table-column
          :label="translate('岗位')"
          prop="PostName"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('持证需要')"
          prop="PostCard"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('是否持证')"
          prop="IsCard"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('证书编号')"
          prop="CardNo"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('作业种类')"
          prop="OPType"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('起止时间')"
          prop="dateQZ"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('是否失效')"
          prop="IsExpired"
          show-overflow-tooltip
        />
        <el-table-column align="center" :label="translate('证书')">
          <template #default="{ row }">
            <div>
              <div>
                <el-image
                  v-if="row.UniqueUrl"
                  fit="contain"
                  :initial-index="9"
                  :preview-src-list="[row.UniqueUrl]"
                  :preview-teleported="true"
                  :src="row.UniqueUrl"
                  style="width: 60px; height: 60px"
                  :z-index="99999"
                  :zoom-rate="1.2"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column :label="translate('操作')" width="200">
          <template #default="{ row }">
            <el-button
              v-if="MenuAuths('edit')"
              plain
              size="small"
              type="primary"
              @click="detailFn(row)"
            >
              {{ translate('编辑') }}
            </el-button>
            <el-button
              v-if="MenuAuths('delete')"
              plain
              size="small"
              type="danger"
              @click="deletedFn(row)"
            >
              {{ translate('删除') }}
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import {
    OperatorCardData,
    DelOperator,
    OperatorSave,
  } from '@/api/baseInfo'
  import { MenuAuth } from '~/src/utils/permission'
  import VabPrint from '@/plugins/VabPrint'
  import { translate } from '@/i18n'
  import { parseTime } from '@/utils'
  import { baseURL } from '@/config'
  import { useUserStore } from '@/store/modules/user'
  const userStore = useUserStore()
  const { token, accountInfo } = useUserStore()
  const { realname } = storeToRefs(userStore)
  export default defineComponent({
    name: 'Flowpath',
    components: {  },
    data() {
      return {
        tableData: [],
        searchInfo: '',
        searchInfo1: '',
        searchInfo2: '',
        searchInfo3: '',
        wheres: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        dialogVisible: false,
        enabled: 0,
        action: '',
        headers: '',
        DetailPageData: {},
        chiledPrintdetail: [],
        isclick: false,
        submitType: 'add',
        layout: 'total, sizes, prev, pager, next, jumper',
        deleList: [],
        MenuAuths: '',
        tableRef: null,
        isPrint: false,
        loading: true,
        isdrawershow: false,
        nodeList: {},
        formId: '',
        status: -1,
        PBMID: '',
        selectArr: [],
        form: {
          OPID: 0,
          Account: '',
          OPName: '',
          UnitName: '',
          BaseUnitName: '',
          PostName: '',
          PostCard: '',
          IsCard: '',
          Gender: '',
          IDCard: '',
          EduLevel: '',
          HeadImageUrl: '',
        },
        rules: {
          code: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请输入工号'),
            },
          ],
          Account: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请输入登录账号'),
            },
          ],
          workFlowName: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请输入账号名称'),
            },
          ],
        },
      }
    },
    created() {
      this.MenuAuths = MenuAuth
      this.getList()
    },
    methods: {
      tableRowClassName({ row, rowIndex }) {
        row.row_index = rowIndex
      },
      handleSelectionChange(e) {
        this.selectArr = e
      },
      getRowKey(row) {
        return row.PBMID
      },
      //复制标识
      async copyToClipboard(val) {
        if (navigator.clipboard && window.isSecureContext) {
          try {
          console.log(navigator.clipboard)
          console.log(window.isSecureContext)
          await navigator.clipboard.writeText(val)
          this.$message({
            message:'复制成功',
            type:'success',
          })
          } catch (err) {
            this.$message({
            message:'复制失败',
            type:'error',
          })
          }

        }else {
          // 创建text area
        const textArea = document.createElement("textarea")
        textArea.value = val
        // 使text area不在viewport，同时设置不可见
        textArea.style.position = "absolute"
        textArea.style.opacity = 0
        textArea.style.left = "-999999px"
        textArea.style.top = "-999999px"
        document.body.appendChild(textArea)
        textArea.focus()
        textArea.select()

        return new Promise((res, rej) => {
          // 执行复制命令并移除文本框
          document.execCommand("copy") ? res() : rej()
          textArea.remove()
        }).then(() => {
          this.$message({
              message: "复制成功",
              type: "success",
            })
          }).catch((err) => {
            this.$message({
              message: "复制失败",
              type: "error",
            })
          })
        }

      },
      translate(row) {
        return translate(row)
      },
      handleClose() {
        this.isdrawershow = false
      },
      async submitPrint() {
        document.title = '领料单'
        await VabPrint(this.$refs.tableRef)
        this.isPrint = false
      },
      async getList() {
        this.wheres = ''
        if (this.searchInfo1 || this.searchInfo2 || this.searchInfo || this.searchInfo3) {
          const arr = []
          this.searchInfo1.trim() !== '' &&
            arr.push({
              name: 'CardNo',
              value: this.searchInfo1,
              displayType: 'like',
            })
          this.searchInfo.trim() !== '' &&
            arr.push({
              name: 'OPName',
              value: this.searchInfo,
              displayType: 'like',
            })
          this.searchInfo2.trim() !== '' &&
            arr.push({
              name: 'UnitName',
              value: this.searchInfo2,
              displayType: 'like',
            })
          this.searchInfo2.trim() !== '' &&
            arr.push({
              name: 'UnitName',
              value: this.searchInfo2,
              displayType: 'like',
            })
          this.searchInfo3.trim() !== '' &&
            arr.push({
              name: 'BaseUnitName',
              value: this.searchInfo3,
              displayType: 'like',
            })
          this.wheres = JSON.stringify(arr)
        }
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: this.wheres,
          export: false,
          value: '',
          openid: ''
        }
        const data = await OperatorCardData(params)
        if(data.data.rows&&data.data.rows.length>0){
          data.data.rows.map((item) =>{
            if(item.ValidityDate) {
              item.ValidityDate = JSON.parse(item.ValidityDate)
              item.dateQZ = item.ValidityDate.join('至')
            }
          })
        }
        this.tableData = data.data.rows
        this.total = data.data.total
        console.log(this.tableData)
        this.loading = false
      },
      async deletedFn(row) {
        this.$confirm(translate('确认删除该吗?'), translate('提示'), {
          confirmButtonText: translate('确定'),
          cancelButtonText: translate('取消'),
          type: 'warning',
        })
          .then(() => {
            this.deleted(row)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: translate('已取消删除'),
            })
          })
      },
      async deleted(row) {
        console.log(row)
        const params = {
          opid: row.OPID
        }
        const data = await DelOperator(params)
        if (data.code == '200') {
          this.$message({
            message: translate('删除成功'),
            type: 'success',
          })
          this.loading = true
          await this.getList()
        }
      },
      //分页条数切换
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      //分页切换
      handleCurrentChange(val) {
        this.pageNo = val
        this.getList()
      },
      closeFn() {
        this.enabled = 0
        this.form.WorkFlowID = ''
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      color: #494949;
    }
    .ml-upload {
      display: inline-block;
      margin-left: 10px;
      vertical-align: bottom;
      margin-right: 10px;
    }
    .w192 {
      width: 192px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .ml10 {
      margin-left: 10px;
    }
    .add {
      margin-bottom: 10px;
      text-align: left;
    }

    .iconcommon {
      position: absolute;
      top: 80px;
      right: 70px;
      font-size: 60px;
      color: blue;
    }
    .iconcommon2 {
      position: absolute;
      top: 80px;
      right: 70px;
      font-size: 60px;
      color: red;
    }
    .w70 {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    .condition-container {
      display: inline-block;
      margin-top: 10px;
    }
    .iconcolor {
      color: #409eff;
    }
    .color_l {
      color: #67c23a;
    }
    .color_red {
      color: #f56c6c;
    }
  }
</style>
